<template>
  <div>
    <el-dialog
      :visible.sync="dialogShow"
      :show-close="true"
      :append-to-body="false"
      :before-close="handleClose"
      :size="showMobilePage?'100%':'80%'"
      class="chart-list-dialog">
      <div class="chart-list-main">
        <Title :total="chartListData.total || 0" title="图表列表" font-size="16px" />
        <el-table
          v-loading="listloading"
          v-if="chartListData.items && chartListData.items.length"
          :data="chartListData.items"
          class="chart-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <el-table-column align="left" label="图表类型">
            <template slot-scope="scope">
              <div class="text">
                {{ scope.row.chartType | chartTypeFilter }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="图表名称">
            <template slot-scope="scope">
              <div class="text">
                {{ scope.row.chartName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <div class="btn-container">
                <div v-if="!scope.row.disabled" class="btn-item" @click="getChartShowData(scope.row.id)">查看</div>
                <div v-else class="btn-item disabled">查看</div>

                <div v-if="hasRouteAuth('total:report:chartedit')" class="btn-item" @click="goEdit(scope.row.id)">编辑</div>
                <div v-else class="btn-item disabled">编辑</div>

                <div v-if="hasRouteAuth('total:report:chartdelete')" class="btn-item" @click="deleteChart(scope.row.id)">删除</div>
                <div v-else class="btn-item disabled">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="empty-container">
          <img :src="emptyImg" alt="">
          <div class="empty-text">暂无数据</div>
        </div>
        <div class="page-pagination">
          <el-pagination
            v-if="chartListData.page"
            :current-page="chartListData.page"
            :page-size="chartListData.perPage"
            :total="chartListData.total"
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
    <ChartShow ref="ChartShow" />
  </div>
</template>
<script>
import { getChartList, deleteChart } from '@/api/reportManage';
import { chartTypeList } from '@/filters/status';
import Title from '@/components/Title';
import ChartShow from './chartShow';
import { hasRouteAuth } from '@/utils/permission';
import emptyImg from '@/assets/empty.png';
import { mapState } from 'vuex';

export default {
  name: 'ChartList',
  components: { Title, ChartShow },
  filters: {
    chartTypeFilter(type) {
      return chartTypeList[Number(type) || 0].name || '';
    }
  },
  data() {
    return {
      emptyImg,
      listloading: false,
      dialogShow: false,
      chartListData: {},
      page: 1,
      id: '',
      tabId: '',
      perPage: 20
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    getData(reset = false, id, tabId) {
      this.dialogShow = true;
      if (id) this.id = id;
      if (tabId) this.tabId = tabId;
      const params = {
        id: this.id,
        tabId: this.tabId,
        page: this.page,
        perPage: this.perPage
      };
      this.listloading = true;
      getChartList(params).then(res => {
        this.listloading = false;
        if (res.code === 200 && res.data) {
          this.chartListData = res.data;
        } else {
          this.chartListData = {};
        }
      }).catch(e => {
        console.error(e);
      });
    },
    // 获取图表展示数据
    getChartShowData(id) {
      this.$refs.ChartShow.getData(id);
    },
    handleClose() {
      this.dialogShow = false;
      this.chartListData = {};
      this.id = '';
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getData();
    },
    deleteChart(id) {
      this.$confirm('是否确定删除该图表', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        deleteChart(id).then(res => {
          this.$message.success('删除成功');
          this.getData();
        }, result => {
          if (result.message !== '网络错误！请检查网络状态...') {
            this.$message.error(result.message);
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    goEdit(chartId) {
      this.$emit('editChart', chartId);
      this.dialogShow = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.chart-list-dialog {
  .empty-container {
    text-align: center;
    margin-top: 80px;
    img {
      width: 80px;
    }
    .empty-text {
      margin-top: 20px;
      color: #666;
      font-size: 14px;
    }
  }
  & ::v-deep {
    .el-dialog {
      border-radius: 12px;
      min-height: 480px;
    }
    .el-dialog__body {
      padding: 2px 24px 32px;
    }
    .el-dialog__headerbtn {
      top: 32px;
    }
    .el-dialog__close {
      font-size: 24px;
    }
  }
}
.chart-list-main {
  .text {
    font-size:15px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(20,28,61,1);
  }
  .chart-table {
    margin-top: 20px;
  }
  & ::v-deep {
    .order-data-header-cell .cell{
      font-size:15px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
    }
  }
  .btn-container {
    display: flex;
    align-items: center;
    .btn-item {
      margin-right: 16px;
      font-size:15px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(64,110,255,1);
      cursor: pointer;
    }
    .disabled {
      color: #999;
      cursor: not-allowed;
    }
  }
  .page-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

</style>
